<template>
  <div>
    <el-form-item label="开始占位内容">
      <el-input v-model="localData.startPlaceholder" clearable placeholder="开始日期的占位内容" />
    </el-form-item>
    <el-form-item label="结束占位内容">
      <el-input v-model="localData.endPlaceholder" clearable placeholder="结束日期的占位内容" />
    </el-form-item>
    <el-form-item label="值格式化">
      <el-select size="default" v-model="localData.valueFormatStr" clearable>
        <el-option value="HH" label="时" />
        <el-option value="HH:mm" label="时:分" />
        <el-option value="HH:mm:ss" label="时:分:秒" />
      </el-select>
    </el-form-item>
    <el-form-item label="显示格式化">
      <el-select size="default" v-model="localData.showFormat" clearable>
        <el-option value="HH" label="时" />
        <el-option value="HH:mm" label="时:分" />
        <el-option value="HH:mm:ss" label="时:分:秒" />
      </el-select>
    </el-form-item>
    <el-form-item label="默认开始时间">
      <el-select v-model="localData.defaultStartTime" clearable @change="handleStartTypeChange">
        <el-option v-for="opt in defaultTimeOptions" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="自定义函数" v-if="localData.defaultStartTime == 'custom'">
      <el-input type="textarea" v-model="localData.customStartTimeFunc" />
    </el-form-item>
    <el-form-item label="默认结束时间">
      <el-select v-model="localData.defaultEndTime" clearable @change="handleEndTypeChange">
        <el-option v-for="opt in defaultTimeOptions" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="自定义函数" v-if="localData.defaultEndTime == 'custom'">
      <el-input type="textarea" v-model="localData.customEndTimeFunc" />
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'TimeRangeConfig',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {},
      defaultTimeOptions: [
        {
          label: '6小时前',
          value: '6hpre'
        },
        {
          label: '1小时前',
          value: '1hpre'
        },
        {
          label: '当前时间',
          value: 'now'
        },
        {
          label: '1小时后',
          value: '1hnext'
        },
        {
          label: '6小时后',
          value: '6hnext'
        },
        {
          label: '自定义',
          value: 'custom'
        }
      ]
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal;
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  methods: {
    handleStartTypeChange(value) {
      if (value == 'custom') {
        this.localData.customStartTimeFunc = '(dayjs)=>{\n}';
      }
    },
    handleEndTypeChange(value) {
      if (value == 'custom') {
        this.localData.customEndTimeFunc = '(dayjs)=>{\n}';
      }
    }
  }
};
</script>
